import React, { Component } from "react";

class App extends Component {
  state = {
    name: "zhangsan",
    show: 1,
    list: [
      {
        id: 1,
        name: "lisi",
      },
      {
        id: 2,
        name: "wangwu",
      },
    ],
    content: "<h1>haha</h1>",
  };

  handleClick() {
    this.setState((prevState) => {
      return {
        show: prevState.show === 1 ? 2 : 1,
      };
    });
  }

  handleClick2() {
    // this.setState(
    //   (prevState) => {
    //     return {
    //       // 错
    // list: prevState.list.push({
    //   id: 3,
    //   name: "zhaoliu",
    // }),

    //       // 对
    // list: prevState.list.concat({
    //   id: 3,
    //   name: "zhaoliu",
    // }),

    //       // 对
    //       list: [...prevState.list, { id: 3, name: "zhaoliu" }],
    //     };
    //   },
    //   () => {
    //     console.log(this.state.list);
    //   }
    // );

    // 对
    this.state.list.push({ id: 3, name: "zhaoliu" });
    this.setState({});
  }

  render() {
    const { name, show, list, content } = this.state;

    return (
      <>
        <h2>state的渲染</h2>
        <div title={name}>name: {name}</div>

        <hr />

        {/* 条件渲染 */}
        {show === 1 && <div>hello react!</div>}
        <button onClick={this.handleClick.bind(this)}>btn</button>

        <hr />

        {/* 循环渲染 */}
        <ul>
          {list.map((item) => {
            return <li key={item.id}>{item.name}</li>;
          })}
        </ul>
        <button onClick={this.handleClick2.bind(this)}>btn2</button>

        <hr />

        {/* <div>{content}</div> */}
        <div dangerouslySetInnerHTML={{ __html: content }}></div>
      </>
    );
  }
}

export default App;
